<template>
  <div class="vita-cells vita-cells-checkbox">
    <label class="vita-cell vita-check-label" for="checkbox-{{uuid}}-{{index}}" v-for="(index, option) in options">
      <div class="vita-cell-hd">
        <input type="checkbox" class="vita-check" value="{{one | getKey}}" v-model="value" id="checkbox-{{uuid}}-{{index}}">
        <vita-icon type="checked"></vita-icon>
      </div>
      <div class="vita-cell-bd vita-cell-primary">
        <p> {{option | getValue}} </p>
      </div>
    </label>  
  </div>
</template>

<script>

  import VitaIcon from './Icon.vue'
  
  export default {

    components: {
      VitaIcon
    },

    props: {
      options: {
        type: Array,
        required: true
      }
    }

  }

  const getKey = (option) => { option === 'object' ? option.key : option }
  const getVlue = (option) => { option === 'object' ? option.value : option }

</script>
